<template>
  <!-- 收集组件 -->
  <div class="main">
    <div class="main_box">
      <!-- 左 -->
      <div class="left">
        <!-- 标题 -->
        <div class="collect-title">全部标签</div>
        <!-- 内容父盒子 -->
        <div class="collect-content-box">
          <ul class="collect-content">
            <transition-group name="collect" appear>
              <li v-for="item in 4" :key="item">
                <!-- 内容大盒子 -->
                <div class="content-box">
                  <!--  半透明 遮罩层 -->
                  <div class="collectMsck"></div>
                  <!-- 图片盒子 -->
                  <div class="picture">
                    <img src="../../state/img/图.jpg" alt="" />
                    <!-- 标识符 -->
                    <span class="icon iconfont">&#xe67f;</span>
                  </div>
                  <!-- 文字 -->
                  <div class="text">Java</div>
                </div>
              </li>
            </transition-group>
          </ul>
        </div>
      </div>
      <!-- 右 -->
      <div class="register">
        <MyInfo></MyInfo>
        <Notice></Notice>
        <Mydate></Mydate>
        <NewReply></NewReply>
        <Tags></Tags>
      </div>
    </div>
  </div>
</template>

<script>
  // 右
  import MyInfo from '@/components/register/MyInfo.vue';
  import Notice from '@/components/register/Notice.vue';
  import Mydate from '@/components/register/Mydate.vue';
  import NewReply from '@/components/register/NewReply.vue';
  import Tags from '@/components/register/Tags.vue';
  export default {
    name: 'Collect',
    data() {
      return {};
    },
    components: {
      MyInfo,
      Notice,
      Mydate,
      NewReply,
      Tags,
    },
  };
</script>
<style lang="less" scoped>
  @import url('../../state/mainPublic.less');
  @import url('../../state/css/barList/collect.less');
  //  动画
  // 刚开始的时候
  .collect-enter,
  .collect-leave-to {
    opacity: 0;
    transform: translateY(50px);
  }
  // 中间过度
  .collect-enter-active {
    transition: all 2s;
  }
  // 最后
  .collect-enter-to {
    opacity: 1;
    transform: translateY(0px);
  }
</style>
